import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { NavLink } from 'react-router-dom'
import { HeaderWrapper, HeaderLeft, HeaderRight } from './style'
import { Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'

interface Iprops {
    children?: ReactNode
}

const Header: React.FC<Iprops> = () => {
    return (
        <HeaderWrapper>
            <div className="app-nav">
                <div className="content">
                    <HeaderLeft>
                        <div className="leftWarp">
                            <NavLink className="logo" to="/">
                                <img src="/images/wyy.png" alt="网易云音乐"></img>
                                网易云音乐
                            </NavLink>
                            <NavLink className="item" to="/discover">
                                发现音乐
                            </NavLink>
                            <NavLink className="item" to="/mine">
                                我的音乐
                            </NavLink>
                            <NavLink className="item" to="/focus">
                                关注
                            </NavLink>
                            <a
                                className="item"
                                href="http://baidu.com"
                                rel="noreferrer"
                                target="_blank"
                            >
                                音乐人
                            </a>
                            <NavLink className="item" to="/download">
                                下载客户端
                            </NavLink>
                        </div>
                    </HeaderLeft>
                    <HeaderRight>
                        <div className="rightWarp">
                            <div className="searchContent">
                                <Input
                                    className="search"
                                    placeholder="音乐/视频/电台/用户"
                                    prefix={<SearchOutlined></SearchOutlined>}
                                ></Input>
                            </div>
                            <div className="art-cen">
                                <button>创作者中心</button>
                            </div>
                            <div className="login">
                                <span>登录</span>
                            </div>
                        </div>
                    </HeaderRight>
                </div>
            </div>
            <div className="b-line"></div>
        </HeaderWrapper>
    )
}

export default memo(Header)
